<template>
	<div id="show-main">
		<el-container>
	  		<el-header>
          <div id="search-head">
              <div id="search-input" @blur="whenblur"> 
                <el-autocomplete ref="autocomplete" prefix-icon="el-icon-search" placeholder="请输入内容" :fetch-suggestions="querySearchAsync" v-model="suggestion" @select="handleSelect" clearable select-when-unmatched @change="handleChange_input"></el-autocomplete>
              </div>
              
              <div id="catogory" >
              <el-cascader :options="options" :show-all-levels="false" @change="handleChange"></el-cascader>
              </div>
            </div>
        </el-header>
	  		<el-main ref="showiframe" @click="handleClick">
           <div id="show-iframe" >
              <iframe :src="src" height="300px" >
              </iframe>
            </div>
        </el-main>
		</el-container>
	</div>
</template>

<script>
  import options from '../data.json'
  export default {
    data() {
      return {
        origin_src:"https://www.baidu.com/s?wd=",
        src:"https://webjike.com/",
        suggestion_list:[],
        suggestion:"",
        timeout:  3,
        options: options.options
      }
    },
    methods: {
        getSug(keyword) {
          let url = 'https://www.baidu.com/sugrec?pre=1&p=3&ie=utf-8&json=1&prod=pc&from=pc_web';
          this.$http.jsonp(url, {
                params: {
                wd: keyword
                },
              jsonp: 'cb'
          }).then(res => {
            if (res.data.g) {
                this.suggestion_list = res.data.g.map(x => ({ value: x['q'] }) );
              console.log(this.suggestion_list);
              } else {
                this.suggestion_list = [];
          }
            
        });
      },

      loadAll(queryString) {
        this.getSug("");
      },
      querySearchAsync(queryString, cb) {
        this.getSug(queryString);
        var suggestion_list = this.suggestion_list;
        var results = queryString ? suggestion_list.filter(this.createStateFilter(queryString)) : suggestion_list;
        clearTimeout(this.timeout);
        this.timeout = setTimeout(() => {
          cb(results);
        }, 30 * 1);
      },
      createStateFilter(queryString) {
        return (state) => {
          return (state.value.toLowerCase().indexOf(queryString.toLowerCase()) === 0);
        };
      },
      handleSelect(item) {
        this.suggestion = item.value;
        this.src = this.origin_src + this.suggestion;
        console.log(item);
      },
      handleChange_input(item) {
        this.src = this.origin_src + this.suggestion;
        console.log(item);
      },
      handleClick(item){
        console.log(this.$refs);
      },
      handleChange(value) {
        // console.log(this.suggestion);
        this.src = value[1] + this.suggestion;
        this.origin_src = value[1];
      },
      whenblur(e){
        this.suggestion_list = [];

      }
    },
    mounted() {
      // this.suggestion_list = this.loadAll();
      this.loadAll();
      window.addEventListener('blur', () => { 
        this.$refs.autocomplete.close();
      });
    }
  };
</script>

<style>
  #search-head{
    position: fixed;
      width: 100%;
      /*min-width: 1100px;
      height: 70px;
      z-index: 3;
      display: block;*/
      /*overflow: visible;*/
      top: 5px;
      left: 0;
      /*background-color: #f5f5f6;*/
      /*box-shadow: 0 0 1px #797979;*/
  }
  #search-input{
    width: 50%;
    display: inline-block;
  }
  #catogory{
    width: 20%;
    display: inline-block;
  }
  .el-autocomplete{
    width: 100%;
    /*float: left;*/
    /*margin-left:5px;
    margin-top: 5px;*/
  }
  .el-button{
    /*margin-left: 16px;*/
  }

	#show-main{
		height: 100%
	}
	
	  .el-header {
    background-color: #B3C0D1;
    color: #333;
    text-align: center;
    line-height: 60px;
    height: 100%
  }
  
  .el-main {
    background-color: #E9EEF3;
    color: #333;
    text-align: center;
    line-height: 160px;
    height: 100%
  }
  
  .el-container {
    margin-bottom: 40px;
    height: 100%
  }

  #show-iframe {
    height: calc( 100% - 50px );
  }


  iframe {
    top: -0px;
    height: calc( 100% + 50px );
    position: relative;
    width: 100%;
    vertical-align: top;
    border: 0;
  }
</style>